import XtxHomePanel from "@/components/library/xtxHomePanel";
import XtxMore from "@/components/library/xtxMore";
import { Link } from "react-router-dom";
import "./index.scss";
import useLazyData from "@/hooks/lazyData";
import { useAxiosWithAuth } from "@/utils/useAxiosWidthAuth";
import { useEffect, useRef, useState } from "react";
function HomeSpecial() {
  const axios = useAxiosWithAuth();
  const [specialList, setSpecialList] = useState<any[]>([]);
  function getSpeical() {
    return axios({
      method: "get",
      url: "/home/special",
    });
  }
  const target = useRef(null);
  const result = useLazyData(target, getSpeical);
  useEffect(() => {
    setSpecialList(result);
  }, [result]);
  return (
    <>
      <XtxHomePanel title="最新专题" right={<XtxMore path="/" />}>
        <div className="special-list" ref={target}>
          {specialList.length &&
            specialList.map((item) => (
              <div key={item.id} className="special-item">
                <Link to="/">
                  <img src={item.cover} />
                  <div className="meta">
                    <p className="title">
                      <span className="top ellipsis"> {item.title}</span>
                      <span className="sub ellipsis">{item.summary}</span>
                    </p>
                    <span className="price">&yen;{item.lowestPrice}起</span>
                    <span className="price">&yen;19.99起</span>
                  </div>
                </Link>
                <div className="foot">
                  <span className="like">
                    <i className="iconfont icon-hart1"></i>
                    {item.collectNum}
                  </span>
                  <span className="view">
                    <i className="iconfont icon-see"></i>
                    {item.viewNum}
                  </span>
                  <span className="reply">
                    <i className="iconfont icon-message"></i>
                    {item.replyNum}
                  </span>
                </div>
              </div>
            ))}
        </div>
      </XtxHomePanel>
    </>
  );
}

export default HomeSpecial;
